DORMANT GUI BUTTONS RESIDE UNOBTRUSIVELY 
IN THE BACKGROUND UPON SELECTION 



FIELD OF THE INVENTION 

[0001] This invention relates to a Graphical User Interface (GUI) design suitable for 
applications on devices such as a Set Top Box (STB) and a. PC. In particular the invention relates 
to a presentation and selection method of user selectable options using 2.5D and 3D spatial 
effects. 

PRIORITY DATE 

[0002] The invention claims priority to an earlier filed patent application (US S/N number 
09/801070, filed March 6, 2001; attorney docket S/N US 018022 ) now abandoned. That 
invention has an identical description and an identical set of claims. 

BACKGROUND ART 

[0003] In a STB the number of available Software-applications (SW) and user-selectable 
options are ever increasing in every new generation. Using buttons with focus and a Remote 
Control (RC) 5 the user can select an option using, e.g., a moving highlight. As the number of 
options increases the user starts losing the overview. This problem only worsens when operating 
in an open networked environment where devices can be added or disconnected and where the 
GUI changes accordingly. 

SUMMARY OF THE INVENTION 

[0004] The invention relates to a GUI design in which solutions are offered for dealing with 
an increased number of options while keeping it easy for the user to control the options. 
[0005] This invention proposes a user-intuitive GUI design with easy-to-select options that 
let the user keep the overview, even with an extended functionality. 

[0006] The communication between networked devices can be the responsibility of a STB in 
the network. The emphasis of the networked system will be on the content as perceived by the 
user and less on the devices themselves i.e., content-centric instead of device-centric. In a 
networked environment it can be advantageous to collect data that is descriptive of content 
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information available at various resources on the network. This data can be combined in a single 
menu to enable the user to select from the content, regardless of the resource. 
[0007] The GUI design as of the current invention is very much suited to take advantage of 
the approach of a data management system, which can collect the data as described above. An 
example of such a data management system is described in patent application US S/N 09/568932 
(attorney docket US 000106), incorporated by reference in its entirety herein. 
[0008] Personalization of content and its contextual filtering are becoming more prevalent. 
The proposed GUI of the invention has been developed with content driven applications in mind. 
[0009] Using the GUI design and approach of this invention, new components can easily be 
added in the GUI, such as a GUI representation of a newly attached networked device. Examples 
of SW-protocols for a network where attaching/detaching a device is allowed are HAVI, UPnP 
and Jini. Methods and rules for data-driven applications can apply to more than one device. If, 
e.g., the user wants to play a certain piece of music on his/her home entertainment system he/she 
is in general less interested from which device it originates. Therefore the graphical presentation 
of various playback functions can be the same for, e.g., an MP3 player and a CD-player. 
[0010] The invention is explained in more detail by using an example of a GUI for a virtual 
audio-jukebox application. The expression "virtual" in this context refers to that all the songs 
seem part of one-and-the-same audio-jukebox to the user. In reality the songs can reside in 
different physical devices such as a CD-player or an MP3 -player. These players can be part of a 
(digital) networked home system. The application can easily be expanded to include multiple 
forms of digital content (e.g. movies etc.). The GUI of the application is also able to present 
feedback to the user when he/she interacts with a physical object, as in this example a CD-player. 
The concrete notion of the physical CD-player is combined in the GUI with the abstract notion of 
digital information, in this case digital audio. Choosing a familiar metaphor (in this example a 
stack of CDs is used) simplifies the usability and structures the relationship between the medium 
(in this example music), the application and the user. The content and control can come however 
from different sources. The networked home system will typically have a certain degree of 
awareness of its networked devices. 

[0011] A typical Television (TV) screen is considered as a device, which provides the visual 
user information. The GUI screenshots used to illustrate this invention have been made with a 
TV screen in mind. But the invention is also applicable to other types of screens, such as that of 
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web-pads or hand-held devices. Since the user is typically located about 7-10 feet from the TV- 
screen (2-3m) it is necessary that GUI objects are larger than those used on a computer screen. 
Therefore less effective space is available for the GUI and a deeper navigation structure is 
required. As a consequence the GUI is designed with only those tools prominently visible on the 
screen that are pertinent to the specific task the user is engaged in. The user can control the 
application using a simple 4-way directional remote control (with an "OK"- button for 
confirming a selection) and possibly another input device for text input (e.g., using a physical or 
virtual keyboard). This as opposed to a computer environment where a full-fledged keyboard and 
a mouse are commonly used as user control means. The invention however also applies to other 
types of user control means such as based on a joystick with a GUI cursor, speech, etc. 
[0012] One aspect of the invention is the usage of a graphical emphasis on user options, 
which are currently relevant to the user and thus must have focus. 

[0013] User options that have focus in this context mean those options that currently need the 
attention of the user, e.g., when the user has to choose one song out of a list of ten. In this 
example the ten songs have focus and get the graphical emphasis. For instance the graphical 
designer can make use of a higher contrast, a larger object size or more saturated colors or 
provide more (e.g., textual) information (or a combination of the before mentioned) for options 
that have focus. The graphical designer can also make use of 2.5D or 3D effects. For example, 
currently relevant options could be designed such that they appear to 'pop-out' of the 
background so that they appear closer to the user. 

[0014] User options that have focus are typically of a certain type, e.g., all play-related 
options for audio such as play, fast-forward, record, stop, fast-backwards or, e.g., a list of songs 
from which a selection can be made, etc. It is also sometimes possible that more than one type of 
user options have focus at the same time. 

[0015] Another method to deal with many options and buttons on a GUI is to enlarge them 
when the user needs to select a desired function, e.g., in a sub-menu. The sub-menu, in this 
context, can comprise one or more user selectable options. In case the sub-menu comprises more 
than one user selectable options, these options are usually of a similar type or are grouped for 
other specific reasons. This method of enlarging options and buttons on a GUI is described in 
patent application US S/N 09/062,364 (attorney docket PHA 23,387), incorporated by reference 
in its entirety herein. 
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[0016] Another aspect of the invention is that user options, which are currently not relevant 
to the user, can be less explicitly shown in the GUI. For instance the graphical designer can make 
use of lower contrast, smaller object size or provide, at most, limited additional information (e.g., 
by using fewer textual or non-textual details) for options that do not have focus. Using 
animations, e.g., by 2.5D or 3D effects, the graphical designer can also make use of dynamical 
effects to make options unobtrusive (or even hide options) that have lost focus. Animation is a 
simulation of movement created by displaying a series of bitmaps. The animation lets the user 
perceive the change as a smooth transition. Thus the impression is avoided of an abrupt 
confrontation with a new layout. Further information about animations is found in patent 
application US S/N 09/128,839 (PHA attorney docket 23,469), incorporated by reference in its 
entirety herein. For example the GUI can have a panel with a set of options that loses focus, flip 
around such that the rear side, with a different set of options, gets the focus. The options that 
have lost focus can become completely invisible or remain partly visible with, e.g., a limited 
size, less contrast, semi-transparent with its background etc. In another example, the graphical 
designer might choose to use a pictorial representation (e.g., an icon) for options that have lost 
focus. An icon can be a metaphoric representation of the sub-menu. In yet another example, the 
graphical designer might choose to use the background art or background motive as a graphical 
representation for options that have lost focus. Especially in the latter example, animation can be 
used as a way to show the transition between the prominent an unobtrusive manner of displaying 
the user options that have lost focus. A combination of any of the techniques described before, to 
show user options less explicitly, is envisioned as well. 

[0017] Yet another aspect of the invention is that user options which get focus can emerge 
from the background and become bigger or get more contrast or get more detailed with, e.g., 
additional textual information. Since the options were already shown in an unobtrusive way on 
the GUI, the user had already notion of their existence. Another advantage of this GUI is that 
options, which have focus, can make very effective use of the limited screen real estate, thus 
making them effective and easy to use. 

[0018] Vice versa, options that lose user focus can submerge from the foreground into the 
background and can, e.g., become semi-transparent, etc. In other words, options that lose focus 
become less intrusive or unobtrusive. An advantage to have these options still visible in the 
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background is to give the user the notion that they are still available at a later stage. Typically the 
possibility that those options will be needed soon again is large. 

[0019] Menu options are distributed and designed in a nested menu, e.g., in a hierarchy of 
(sub-) menus. Different levels of hierarchy are represented in different graphical manners so as 
to let user concentrate on a (sub-) menu with the most focus, but with a previous menu level (and 
possibly next menu level) present with less focus. 

BRIEF DESCRIPTION OF THE DRAWINGS 

[0020] The invention is explained using some schematic diagrams of an input device and 
some GUI screenshots, by way of an example, and with reference to the accompanying drawing 
wherein: 

Fig. 1 is a diagram of a remote control, which can be used as a user input device 
according to this invention. 

Fig. 2 is a schematic diagram illustrating a GUI screenshot with some elements that have 
a strong sense of place. 

Fig. 3 is a schematic diagram illustrating a GUI screenshot with elements that have lost 

focus. 

Fig. 4 is a schematic diagram illustrating a GUI screenshot when content is being played. 
Fig. 5 is a schematic diagram illustrating a GUI screenshot with the palette tool flipped 

around. 

Fig. 6 is a schematic diagram illustrating a GUI screenshot with highlighted function 

menu. 

Fig. 7 is a schematic diagram illustrating a GUI screenshot of the function Web store with 
some deeper level user options. 

DETAILED DESCRIPTION OF THE DRAWINGS 

[0021] Fig. 1 is a schematic diagram illustrating a RC 100, which can be used as a user input 
device according to this invention. RC 100 comprises a numerical keypad 102, which can be 
used for direct digit entry, e.g., for CD track selection. It also comprises a cursor control keypad 
104 (with Up, Down, Right and Left keys) and an OK button 106. By using the keypad 104 the 
user can, e.g., navigate, over GUI highlights on a TV screen, to a desired option. The 'OK'- 
button 106 can be pushed to express the user's choice after arriving at the desired option. The 
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user, to navigate back to a previous GUI screen and/or user option(s) screen, can use a back 

button 108. Button functions 1 10 can be used by the user, e.g., to activate the displaying of 

certain functions. Because of the very constrained screen area for the GUI, on, e.g., a TV screen, 

certain functions can not be shown, at least not in full exposure, at all times. 

[0022] Transport controls 1 12 can be used by the user to facilitate actual enjoying a music 

collection. 

[0023] Fig. 2 is a schematic diagram illustrating GUI screenshot 200 with some elements that 
have a strong sense of place. Parts of screenshot 200 are a text feedback 202, a physical anchor 
204, a genre 206, an owner 208, a palette tool 210 and a transport indicator 212. 
[0024] Because of the spatial constraints of this type of interface (i.e., most of all content 
exists visually on a single screen) it is very important for the user to have a strong sense of place 
and a sure sense of where they are in the interface. To provide this, two main anchors exist in 
GUI screenshot 200 to provide the user with text feedback 202 (e.g., album selection: Madonna 
"Ray of Light") in addition to physical anchor 204. Using physical anchor 204 the GUI designer 
tries to show the user a metaphor of a physical music collection (a stack of CDs is shown). As 
CDs are selected from the stack, their title or other relevant information can be displayed in the 
upper left corner as text feedback 202. 

[0025] Another key element of the user interface is the management of the relationship 
between the owner of the collection and the genre or category of music (e.g., rock, jazz, opera, 
etc. . .). Because the music collection can be divided in groups, such as by the owner, it is very 
important for the user to be able to control the resulting views smoothly and independently. It 
can be divided according to ownership, illustrated by owner 208, but also according to genre 
(with the ability to create customized genres). Although the music can be divided using 
numerous criterions, in this example only two types of divisions are used. It is noted that the 
division of the music collection can contain overlaps. 

[0026] Because of the relationship between owners and genres, the palette tool 210 is 
actually two-sided in the described example. By e.g., using animation, the flipping between the 
sides can be visualized thereby giving the user a strong sense of existence of both sides and thus 
of the relationship. The user can, in the example, flip the palette from owner and get the genre 
palette side. 
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[0027] Another key element of the user interface is the omnipresence of the transport 
indicator 212 (i.e., play, pause, fast forward, stop, and rewind). Because the most important 
reason to have this interface is to facilitate users actually enjoying their music collection, at all 
times the user must have the ability to play music. 

[0028] Fig. 3 is a schematic diagram illustrating a GUI screenshot 300 with elements that 
have lost focus. Parts of screenshot 300 are a lost focus palette tool 310, a physical anchor 204, a 
genre 206, an owner 208, unobtrusive tool buttons 306, a user selection 308 and a transport 
indicator 212. 

[0029] Certain elements of the GUI are regarded a helpful part, even though they might have 
lost focus at a particular moment. Also certain elements might soon become relevant to the user 
or might soon get focus. Because of the very constrained screen area certain techniques have to 
be applied to make or keep the user aware of these elements. Techniques that are proposed by the 
inventor are, e.g., 2.5 and 3D animation and movement of GUI elements, resizing and changing 
contrast of GUI elements to their background. Another aspect of the invention is a technique 
proposed to make GUI elements natural parts of their GUI screen background. For example 
unobtrusive tool buttons 306 are present in the background and natural parts of the background 
until the user decides he/she needs a tool. The tool buttons 306 are currently unobtrusively 
present since, e.g., it is anticipated that the user needs them soon. As pointed out earlier, this can 
be a consequence of a hierarchical menu with layers of sub-menus. A tool might very well be 
used in one of the next user actions. In yet another example, palette tool 210 of GUI 200 can 
physically not be present in its selectable condition because of the competing presence of the 
content (which here takes precedence). Therefore it has been resized to lost focus palette tool 
310. Due to its new size the buttons of the lost focus palette tool 310 are not labeled any more. 
Depending on resources available for the GUI, the transition of tool 210 to lost focus palette tool 
310 can be achieved with an animation movement and/or a dynamic resizing animation. 
[0030] Fig. 4 is a schematic diagram illustrating a GUI screenshot 400 when content is being 
played. Parts of screenshot 400 are a text feedback 402, a physical anchor 204, a genre 206, an 
owner 208, a lost focus palette 310, a user selection 404 and an active transport indicator 406. 
[0031] In screenshot 400 the user is given unambiguous feedback by highlighting an element 
from the transport indicator 406, in this example the play function. Text feedback 402 and user 
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selection 404 provide textual feedback to the user. In screenshot 400 the name of the user/owner 
is shown using owner 208. 

[0032] Fig. 5 is a schematic diagram illustrating a GUI screenshot 500 with the palette tool 
flipped around. Parts of screenshot 500 are a text feedback 202, a physical anchor 204, a genre 
206, an owner 508, a palette tool 510 and a transport indicator 212. 

[0033] In screenshot 500 the palette tool 510 has two sides/views. It is however important to 
give the user the illusion of the existence of other view. In screenshot 500 this is achieved by 
showing a slightly tilting palette tool 510. Another example of giving the user the illusion of the 
existence of other views would be the use of tabs (not visualized). When changing from one 
view of the palette tool 510 to another view the user can also be made aware of the other side, 

h& e.g., by means of animation in which the palette tool is flipped smoothly. It is also possible to 

□ extend the number of views to a higher number. 

* [0034] Fig. 6 is a schematic diagram illustrating a GUI screenshot 600 with a highlighted 
S3 function menu. Parts of screenshot 600 are an owner 608, a lost focus palette 3 1 0, a physical 
J anchor 204, a genre 206, tool buttons 606, a user selection 610 and a transport indicator 212. 
L [0035] In screenshot 600 the button "add to playlist" of the tool buttons has gotten focus, 
yj This can be the result of a user action such as pressing functions button 1 1 0 on remote control 
100. This as opposed to screenshot 300 where the tool buttons 306 are currently semi visible and 

D can e.g., be even part of a background picture or pattern. In screenshot 600 the user now gets a 

Fy 

clear feedback that certain tool buttons are available. For instance the contrast of tool buttons 
might be larger, the button that has currently focus might be highlighted and the user might be 
able to browse the buttons using cursor control keypad 104. 

[0036] Fig. 7 is a schematic diagram illustrating a GUI screenshot 700 of the function Web 
store with some deeper level user options. Parts of screenshot 700 are a shop items bar 702, 
similar shop items 704, a Web-store button 706 and a Web-store button sub-menu 708. 
[0037] Screenshot 700 might be a next screen after the user browsed over tool buttons 606 
and pressed the OK buttonl06 when the button "Web-store" was highlighted. The user's focus 
can now be to make a selection from merchandise displayed in items bar 702. As a consequence, 
GUI screenshot 700 mainly show elements relevant to the current user's focus although certain 
user options might still be semi visible parts of the background. 
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